
<span class="page-title"><i class="fa fa-history"></i> Device History</span>

<section class="content-header">
    <h1>
        <i class="fa fa-sitemap"></i> <a href="#/boards">Boards</a>  <i class="fa fa-arrow-right"></i>
        <a href="#/boards/${::ctrl.board.id}">${::ctrl.board.description}</a>  <i class="fa fa-arrow-right"></i> ${::ctrl.device.description}
    </h1>
</section>


<!-- Main content -->
<section class="content" data-ng-init="ctrl.init()">
    <div class="row">
        <div class="col-md-3">
            <div class="box box-primary">
                <div class="box-body box-profile">
                    <form ng-submit="ctrl.save($event)" class="form-horizontal ng-pristine ng-invalid ng-invalid-required">

                        <img class="profile-user-img img-responsive" src="${ctrl.getIcon()}" style="border-radius: 16%;">

                        <h3 class="text-center">Device Properties</h3>

                        <input type="hidden" autocomplete="false" ng-model="model.id" class="ng-pristine ng-untouched ng-valid ng-empty">

                        <div class="row">
                            <label class="col-sm-2 control-label">Title</label>
                            <div class="col-sm-10">
                                <input class="form-control" ng-model="ctrl.formDevice.title" />
                            </div>
                        </div>
                        <div class="row">
                            <label class="col-sm-2 control-label">Type</label>
                            <div class="col-sm-10 form-control-static">
                                <span class="badge device-type-${::ctrl.formDevice.type}"> <i class="fa ${ ::ctrl.formDevice | deviceIcon}" aria-hidden="true"></i> ${ ::ctrl.formDevice.type | deviceType}</span>
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-sm-2 control-label">Icon</label>
                            <div class="col-sm-10 form-control-static">
                                <ui-select ng-model="ctrl.formDevice.icon" theme="select2"  style="width: 120px;">
                                    <ui-select-match>
                                        <span ng-bind="$select.selected.id"></span>
                                    </ui-select-match>
                                    <ui-select-choices repeat="item.id as item in (ctrl.deviceIcons | filter: $select.search)">
                                        <img ng-src="/images/devices/on/${item.id}" />
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-sm-2 control-label">ID</label>
                            <div class="col-sm-10 form-control-static">
                                <span class="">${ ::ctrl.formDevice.id}</span>
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10 form-control-static">
                                <span class="">${ ::ctrl.formDevice.name}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">Sensor</label>
                            <div class="col-sm-10 form-control-static">
                                <span class="">${ ::ctrl.formDevice.sensor}</span>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">Save</button>
                    </form>
                </div>
                <!-- /.box-body -->
            </div>
        </div>

        <div class="col-md-9" id="device-history">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Change Log <small> (Showing ${ctrl.history.length}) </small></h3>

                    <div class="box-tools pull-right">

                        <ul class="list-inline">
                            <li><a class="btn btn-danger btn-xs" ng-really-click="ctrl.deleteHistory()">Clear History</a></li>
                            <li><a class="btn btn-info btn-xs"  data-toggle="modal" data-target="#popup-export">Export</a></li>
                            <li role="separator" class="divider"></li>
                            <li>Period:</li>
                            <li> <input type="number" class="form-control input-xs" size="2"  style="width: 60px" ng-model="ctrl.historyOptions.periodValue"/> </li>
                            <li>
                                <select ng-model="ctrl.historyOptions.periodType" class="form-control input-xs" style="width: 120px" >
                                    <option value="REALTIME">Real-Time</option>
                                    <option value="MINUTE" selected="selected">Minute(s)</option>
                                    <option value="HOUR">Hour(s)</option>
                                    <option value="DAY">Day(s)</option>
                                    <option value="WEEK">Week(s)</option>
                                    <option value="MONTH">Month(s)</option>
                                    <option value="RECORDS">Last Records</option>
                                </select>
                            </li>
                            <li>Page:</li>
                            <li>
                                <div id="char-size-ctrl" class="btn-group btn-group-xs" data-toggle="btn-toggle">
                                    <button type="button" class="btn btn-primary" ng-click="ctrl.prevPage()"><i class="fa fa-angle-double-left"></i></button>
                                    <button type="button" class="btn btn-primary">${ctrl.pageNumber}</button>
                                    <button type="button" class="btn btn-primary" ng-click="ctrl.nextPage()"><i class="fa fa-angle-double-right"></i></button>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th width="200px">Date</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="x in ctrl.history">
                                <td>${x.timestamp | date:'hh:mm:ss dd/MM/yy'}</td>
                                <td>${x.value}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>


<!----------------------------------------------------------------->
<!-- New Board                                                   -->
<!----------------------------------------------------------------->
<div id="popup-export"  class="modal fade" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
        <form class="form-horizontal" action="${::ctrl.exportUrl}" method="post">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >Export</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Period</label>
                        <div class="col-sm-10 form-inline">
                            <input type="number" style="width:60px" class="form-control" name="periodValue" value="1" />
                            <select name="periodType" class="form-control" style="width: 120px" >
                                <option value="MINUTE">Minute(s)</option>
                                <option value="HOUR">Hour(s)</option>
                                <option value="DAY">Day(s)</option>
                                <option value="WEEK">Week(s)</option>
                                <option value="MONTH" selected="selected">Month(s)</option>
                                <option value="RECORDS">Last Records</option>
                            </select>
                            <label>End at</label>
                            <input type="text" name="periodEnd" style="width:120px" class="form-control"  placeholder="Now ..." />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Timestamps</label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                <input type="checkbox" id="timestamp-field" name="timestamp" />
                                <label for="timestamp-field">
                                    Enable
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Download</button>
                </div>
            </div>
        </form>
    </div>
</div>
